<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My Site</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.5 -->
  <link href="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- Font Awesome -->
  <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Ionicons -->
  <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  <!-- Theme style -->
  <link href="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link href="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <style type="text/css">
      #choose_user li{width: 33%}
      #message-list{height: 716px;}
  </style>
  </head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">

    <!-- Main content -->
    <section class="content">

      <!-- Your Page Content Here -->
        <div class='row'>
            <div class="col-md-1"></div>
            <div class="col-md-3">
              <!-- USERS LIST -->
              <div class="box box-danger">
                <div class="box-header with-border">
                  <h3 class="box-title">在线成员</h3>

                  <div class="box-tools pull-right">
                    <span class="label label-danger" id="num">0 位成员</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                    </button>
                  </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                  <ul class="users-list clearfix" id="choose_user">
                  </ul>
                  <!-- /.users-list -->
                </div>
              </div>
              <!--/.box -->
            </div>

            <div class="col-md-4">
              <!-- DIRECT CHAT WARNING -->
              <div class="box box-warning direct-chat direct-chat-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">聊天窗口</h3>

                  <div class="box-tools pull-right">
                    <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <!-- Conversations are loaded here -->
                  <div class="direct-chat-messages" id="message-list">

                  </div>
                  <!--/.direct-chat-messages-->

                  <!-- /.direct-chat-pane -->
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                  <input type="text" id="to_user" style="float: left; width: 20%" class="form-control" readonly="true" name="" value="所有人">
                  <form action="#" method="post">
                    <div class="input-group">
                      <input type="text" id="message" placeholder="Type Message ..." class="form-control" autocomplete="off">
                          <span class="input-group-btn">
                            <button type="submit" class="btn btn-warning btn-flat">Send</button>
                          </span>
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>
              <!--/.direct-chat -->
            </div>

            <div class='col-md-4'>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </section>

        <div class="modal" id="modal-edit">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">选择一个用户</h4>
              </div>
              <div class="modal-body">
                  <ul class="users-list clearfix">
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user1-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Alexander</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user8-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Norman</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user7-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Jane</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user6-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">John</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user2-160x160.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Alexander</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user5-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Sarah</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user4-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Nora</a>
                    </li>
                    <li>
                      <img src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/img/user3-128x128.jpg" alt="User Image">
                      <a class="users-list-name" href="#">Nadia</a>
                    </li>
                  </ul>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->

<script id="tpl-message-list" type="text/x-handlebars-template">
    <div class="direct-chat-msg {{#if right}} right{{/if}}">
      <div class="direct-chat-info clearfix">
        <span class="direct-chat-name pull-left">{{un}}</span>
        <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
      </div>
      <img class="direct-chat-img" src="{{ui}}" alt="Message User Image">
      <div class="direct-chat-text">
        {{msg}}
      </div>
    </div>
</script>

<script id="tpl-user-list" type="text/x-handlebars-template">
    <li>
      <i class="fa fa-envelope-o" style="font-size: 10rem;"></i>
      <a class="users-list-name" href="#">所有人</a>
      <span class="users-list-date"> </span>
    </li>
    {{#each this}}
    <li>
      <img src="{{ui}}" alt="User Image">
      <a class="users-list-name" href="#">{{un}}</a>
      <span class="users-list-date">{{time}}</span>
    </li>
    {{/each}}
</script>

<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.4 -->
<script src="../socket.io/socket.io.js"></script>
<script src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- SlimScroll -->
<script src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="http://172.30.10.51/laralearn/public/bower_components/AdminLTE/dist/js/app.min.js"></script>
<!-- Handlebars Template -->
<script src="//cdn.bootcss.com/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="http://172.30.10.51/laralearn/public/js/jquery.unserializeArray.js" type="text/javascript"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
<script type="text/javascript">
var socket   = io();
var username = '';
var user_img = '';
var to_user  = '所有人';
var to_img   = '';

if (username == '' || user_img == '') {
    $("#modal-edit").modal("show");
}

socket.on('display', function(un, ui, tu, ti, msg){
    var right = (un == username);
    var tpl = Handlebars.compile($("#tpl-message-list").html());
    $('#message-list').append(tpl({un:un, ui:ui, tu:tu, msg:msg, right:right})).scrollTop($('#message-list')[0].scrollHeight);
    console.log(111);
});

socket.on('join', function(users){
    console.log(users);
    var tpl = Handlebars.compile($("#tpl-user-list").html());
    $('#choose_user').html(tpl(users));
    $('#num').html(users.length + ' 位成员');
});

socket.on('left', function(users){
    var tpl = Handlebars.compile($("#tpl-user-list").html());
    $('#choose_user').html(tpl(users));
    $('#num').html(users.length + ' 位成员');
});

socket.on('exists', function(){
    console.log('exists');
    username = '';
    user_img == '';
    alert('该角色已被选择！');
    $("#modal-edit").modal("show");
    return false;
});

$("#modal-edit a").click(function(){
    $("#modal-edit").modal("hide");
    username = $(this).html();
    user_img = $(this).parent().find('img').attr('src');
    socket.emit('join', username, user_img);
});

$("#choose_user").on('click', 'a', function(){
    to_user = $(this).html();
    $("#to_user").val(to_user);
    to_img = $(this).parent().find('img').attr('src');
    $('#message').focus();
    return false;
});

$('form').submit(function(){
    if (username == '' || user_img == '') {
        $("#modal-edit").modal("show");
        return false;
    }

    var message  = $('#message').val();
    if (message.length == 0) {
        $('#message').focus();
        return false;
    }

    socket.emit('send', username, user_img, to_user, to_img, message);
    $('#message').val('');
    $('#message').focus();
    return false;
});
</script>
</body>
</html>